<template>
    <div class="content">
        <div class="package-info">
            <div class="head">
                <div class="inner">
                    <img class="shop" src="@/static/images/common/shop.png" />
                    <p class="name">{{ packageDetail.studyhallName }}</p>
                </div>
            </div>
            <package-item :item="packageDetail" />
        </div>
        <div class="product-info">
            <div class="head">
                <div class="inner">
                    <img class="tips" src="@/static/images/common/tips.png" />
                    <p class="name">商品信息</p>
                </div>
            </div>
            <div class="product-list">
                <div class="inner">
                    <div class="product-item" v-for="(item, index) in descriptionList" :key="index">
                        {{ item }}
                    </div>
                </div>
            </div>
            <div class="type-num">
                <div class="sub-item">
                    <div class="label">
                        <img class="icon" src="@/static/images/common/way.png" />
                        取货方式
                    </div>
                    <p class="value">店内自取</p>
                </div>
                <div class="sub-item">
                    <div class="label">
                        <img class="icon" src="@/static/images/common/order.png" />
                        数量
                    </div>
                    <u-number-box v-model="count"></u-number-box>
                </div>
            </div>
        </div>
        <phone-call :phoneNumber="phone" />

        <div class="footer-bar">
            <div class="price">
                总价
                <span class="unit">¥</span>
                <span class="total">{{ (packageDetail.price * count) | formatMoney(2) }}</span>
            </div>
            <u-button
                color="#FF5518"
                text="已拿货确认支付"
                :customStyle="{ width: '288rpx', margin: 0 }"
                @click="submit"
            ></u-button>
        </div>
    </div>
</template>

<script>
import PackageItem from '@/components/PackageItem';
import PhoneCall from '@/components/PhoneCall';
import { mapGetters } from 'vuex';
export default {
    name: 'settle',
    components: {
        PackageItem,
        PhoneCall,
    },
    computed: {
        ...mapGetters(['phone']),
    },
    data() {
        return {
            id: null,
            studyhallId: null,
            packageDetail: {},
            descriptionList: [],
            count: 1,
        };
    },
    onLoad(options) {
        if (options.id) {
            this.id = Number(options.id);
            this.studyhallId = Number(options.studyhallId);
            this.getPackageDetail();
        }
    },
    methods: {
        getPackageDetail() {
            this.$Api.study.package
                .get({
                    id: this.id,
                })
                .then(res => {
                    this.packageDetail = res;
                    this.descriptionList = (res.description || '').split('\n');
                });
        },
        submit() {
            let items = [];
            items.push({
                spuId: this.id,
                count: this.count,
            });
            this.$Api.trade.order
                .submit({
                    items: items,
                    studyhallId: this.studyhallId,
                })
                .then(res => {
                    let response = JSON.parse(res.displayContent);
                    // 唤起微信支付
                    uni.requestPayment({
                        provider: 'wxpay',
                        timeStamp: response.timeStamp,
                        nonceStr: response.nonceStr,
                        package: response.packageValue,
                        signType: response.signType,
                        paySign: response.paySign,
                        success: function (payRes) {
                            if (payRes.errMsg === 'requestPayment:ok') {
                                uni.navigateTo({
                                    url: '/pages/package/success?orderId=' + res.orderId,
                                });
                            }
                        },
                        fail: function (err) {
                            if (err.errMsg === 'requestPayment:fail cancel') {
                                uni.showToast({
                                    title: '用户取消支付',
                                    icon: 'none',
                                });
                            } else {
                                uni.showToast({
                                    title: '支付失败',
                                    icon: 'none',
                                });
                            }
                        },
                    });
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    padding: 20rpx 30rpx;
    .package-info {
        background: #fff;
        border-radius: 24rpx;
        .head {
            padding: 10rpx 32rpx 0;
            .inner {
                border-bottom: 1rpx solid #e5e5e5;
                @include flexBox(flex-start, center);
                .shop {
                    width: 48rpx;
                    height: 48rpx;
                }
                .name {
                    padding: 20rpx 0;
                    font-weight: 600;
                    color: #2f2f2f;
                    font-size: 24rpx;
                    margin-left: 20rpx;
                }
            }
        }
    }
    .product-info {
        background: #fff;
        border-radius: 24rpx;
        margin-top: 20rpx;
        .head {
            padding: 10rpx 32rpx 0;
            .inner {
                border-bottom: 1rpx solid #e5e5e5;
                @include flexBox(flex-start, center);
                .tips {
                    width: 32rpx;
                    height: 32rpx;
                }
                .name {
                    padding: 20rpx 0;
                    font-weight: 600;
                    color: #2f2f2f;
                    font-size: 28rpx;
                    margin-left: 20rpx;
                }
            }
        }
        .product-list {
            padding: 0 32rpx;
            .inner {
                padding: 20rpx 0;
                border-bottom: 1rpx solid #e5e5e5;
                .product-item {
                    font-size: 28rpx;
                    color: #2f2f2f;
                    line-height: 44rpx;
                }
            }
        }
        .type-num {
            width: 100%;
            padding: 22rpx 30rpx;
            box-sizing: border-box;
            .sub-item {
                @include flexBox(space-between, center);
                &:first-child {
                    margin-bottom: 30rpx;
                }
                .label {
                    font-size: 28rpx;
                    color: #5c5c5c;
                    @include flexBox(flex-start, center);
                    .icon {
                        width: 32rpx;
                        height: 32rpx;
                        margin-right: 24rpx;
                    }
                }
                .value {
                    font-size: 28rpx;
                    color: #2f2f2f;
                }
            }
        }
    }
    .service {
        padding: 20rpx 30rpx;
        .phone {
            font-size: 24rpx;
            color: #898989;
            text-decoration: underline;
        }
    }
    .footer-bar {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 14rpx 30rpx;
        background: #fff;
        box-sizing: border-box;
        @include flexBox(space-between, center);
        .price {
            font-size: 28rpx;
            color: #5c5c5c;
            .unit {
                font-size: 32rpx;
                font-weight: 600;
                color: #fa6400;
                margin-left: 12rpx;
            }
            .total {
                font-size: 48rpx;
                font-weight: 600;
                color: #fa6400;
            }
        }
    }
}
</style>
